<template>
	<view class="main">
		<u-navbar :is-back="true" title="个人资料" :background="background" :border-bottom="false" title-color="#fff"
			title-size="35rpx" title-bold="true" back-icon-color="#fff">
		</u-navbar>
		<view class="content">
			<view class="info">
				<view class="left">
					<text>头像</text>
				</view>
				<view class="right">
					<view class="head" @click="changehead">
						<image :src="userinfo.head" mode=""></image>
					</view>
					<image src="../../../static/images/goright.png" mode=""></image>
				</view>
			</view>
			<view class="info" style="padding: 32rpx 0;" @click="show=true">
				<view class="left">
					<text>昵称</text>
				</view>
				<view class="right">
					<text>{{userinfo.nick}}</text>
					<image src="../../../static/images/goright.png" mode=""></image>
				</view>
			</view>
			<view class="info" style="padding: 32rpx 0;" @click="flag=true">
				<view class="left">
					<text>手机号</text>
				</view>
				<view class="right">
					<text>{{userinfo.phone}}</text>
					<image src="../../../static/images/goright.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="zhezhao" v-if="show">
			<view class="pupu">
				<image @click="close" src="../../../static/images/cha.png" mode=""></image>
				<view class="pu_tit">修改昵称</view>
				<input class="cont" placeholder="请输入修改的昵称" v-model="name" type="text" value="" />
				<view class="copy" @click="confirm_name">
					确认
				</view>
			</view>
		</view>
		<view class="zhezhao" v-if="flag">
			<view class="pupu">
				<image @click="close" src="../../../static/images/cha.png" mode=""></image>
				<view class="pu_tit">修改手机号</view>
				<input class="cont" placeholder="请输入修改的手机号" type="number" maxlength="11" value="" v-model="phone"/>
				<view class="inputs">
					<view style="display: flex; justify-content: space-between; align-items: center;">
						<input v-model="codes" placeholder="请输入验证码" />
							<view class="code"  @click="sendCodeBtn">
								{{send?'发送验证码':second+'s重新发送'}}
							</view>
					</view>
				</view>
				<view class="copy" @click="confirm">
					确认
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#111111',
					// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
				},
				flag: false,
				show: false,
				phone:'',
				codes:'',
				name:'',
				userinfo:{},
				s: 60,	//默认倒计时
					second: 0,
					send: true, //按钮可以点击
				
				 
			}
		},
		onLoad(){
			this.getuserinfo()
		},
		methods: {
			// 发送验证码
			sendCodeBtn() {
				let that = this;
				// 防止多次重复点击
				if (!that.send) {
					return false;
				}
				global.$http.request({
					url: '/api/index/send_yzm',
					data: {
						scene:'new_phone',
						phone: this.phone,
						token:uni.getStorageSync('token')
					}
				}).then(res => {
					console.log(res);
					if (res.data.code == 0) {
						// 发送验证码
						that.send = false;
						uni.showToast({
							title: '发送成功',
							icon: 'none',
							success: () => {
								this.time(); // 倒计时
							}
						})
					}
				})
			
			},
			// 倒计时
			time() {
			
				let that = this;
				that.second = that.s;
				let interval = setInterval(function() {
					if (that.second == 1) {
						that.send = true;
						that.second = that.s;
						clearInterval(interval);
					} else {
						console.log(that.second)
						that.second--;
					}
				}, 1000)
			},
			//修改头像
			changehead(){
				const that=this
				uni.chooseImage({
					count: 1,
					sourceType: ['album'],
					success: function (res) {
						var tempFilePaths= res.tempFilePaths
						console.log(tempFilePaths);
				global.$http.upload('/api/setting/head', {
					  filePath: tempFilePaths[0], // 要上传文件资源的路径。
					  name: 'head', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
					  formData: {
						  token:uni.getStorageSync('token')
					  }, // HTTP 请求中其他额外的 form data
					}).then(res => {
						console.log(res.data.data);
						that.userinfo.head=res.data.data.head
					// setTimeout(() => {
					// 	this.getuserinfo()
					// }, 1000);
					}).catch(err => {
					})
					}
				});
				
			},
		
			close() {
				this.flag = false
				this.show = false
			},
			//更改手机号
			confirm(){
				global.$http.request({
					url:'/api/setting/new_phone',
					data:{
						phone:this.phone,
						code:this.codes,
						token:uni.getStorageSync('token')
					}
				}).then(res=>{
					if(res.data.code==0){
						console.log(res);
						this.close()
						this.codes='',
						this.phone=''
					}
				})
			},
			//获取用户信息
			getuserinfo() {
				global.$http.request({
					url: '/api/mine/index',
					data: {
						token: uni.getStorageSync('token'),
					}
				}).then(res => {
					if (res.data.code == 0) {
						console.log(res.data.data);
						this.userinfo=res.data.data
						// this.userinfo.phone=res.data.data.phone.substr(0,3)+"****"+res.data.data.phone.substr(7);  
					}
				})
			},
			confirm_name(){
				global.$http.request({
					url:'/api/setting/nick',// 
					data:{
						nick:this.name,
						token:uni.getStorageSync('token')
					}
				}).then(res=>{
					this.nick=''
					if(res.data.code==0){
						console.log(res);
						this.close()
						
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		font-family: PingFang SC-Regular, PingFang SC;
		background-color: #111111;

		width: 750rpx;

		.main {
			display: flex;
			flex-direction: column;
			align-items: center;

			.content {
				margin: 22rpx 0rpx;
				width: 686rpx;
				background: #181818;
				border-radius: 32rpx;
				opacity: 1;

				.info {
					display: flex;
					justify-content: space-between;
					border-bottom: 2rpx solid #262626;
					padding: 16rpx 0;
					margin: 0 24rpx;

					.left {
						image {
							width: 48rpx;
							height: 48rpx;
							padding-right: 16rpx;
						}

						display: flex;
						align-items: center;
						font-size: 32rpx;
						font-weight: 400;
						color: #FFFFFF;

					}

					.right {
						display: flex;
						align-items: center;

						.head {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
							padding-right: 8rpx;
							overflow: hidden;

							image {
								width: 80rpx;
								height: 80rpx;
							}
						}

						image {
							width: 24rpx;
							height: 24rpx;
						}
					}
				}

				.info:last-child {
					border: none;
				}


			}

			.btn {
				margin-top: 60rpx;
				padding: 24rpx 96rpx;
				background: #F3C860;
				border-radius: 46rpx;
				opacity: 1;
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}

			.zhezhao {
				background-color: rgba(0, 0, 0, 0.5);
				position: fixed;
				top: 0;
				width: 750rpx;
				height: 100%;
				z-index: 5;

				.pupu {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin: 68% auto 0 auto;
					padding: 40rpx;
					z-index: 10;
					// overflow: hidden;
					width: 600rpx;
					height: 608rpx;
					background: #333333;
					border-radius: 32rpx;
					opacity: 1;
					position: relative;

					image {
						width: 48rpx;
						height: 48rpx;
						position: absolute;
						top: 10rpx;
						right: 10rpx;
					}

					.inputs {
						width: 520rpx;
						height: 92rpx;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						border: 2rpx solid #F3C860;
						margin-bottom: 32rpx;
						input {
							width: 250rpx;
							padding: 20rpx 0 24rpx 32rpx;
							font-size: 32rpx;
							font-weight: 400;
							color: #FFFFFF;
							opacity: 0.8;
						}

						.code {
							white-space:nowrap;
							padding-right: 32rpx;
							font-size: 32rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #F3C860;

						}
					}

					.pu_tit {
					
						font-size: 32rpx;
						font-weight: bold;
						color: #FFFFFF;

					}

					.cont {
							margin: 60rpx 0rpx 22rpx 0;
						font-size: 32rpx;
						font-weight: 400;
						color: #FFFFFF;
						width: 487rpx;
						border-radius: 12rpx;
						opacity: 1;
						border: 2rpx solid #F3C860;
						padding: 20rpx 0 24rpx 32rpx;

					}

					.copy {
						margin-top: 60rpx;
						text-align: center;
						padding: 24rpx 128rpx;
						background: #F3C860;
						border-radius: 46rpx;
						opacity: 1;
						font-size: 32rpx;
						font-weight: bold;
						color: #333333;
					}
				}
			}
		}
	}
</style>
